<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./assets/img/favicon.png" type="image/x-icon">
  <title>寿司网站</title>
  <!-- 字体图标 -->
  <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet" />
  <link rel="stylesheet" href="./assets/css/styles.css">
</head>

<body>
  <!-- 头部区 -->
  <header class="header" id="header">
    <nav class="nav container">
      <a href="#" class="nav-logo">
        <img src="./assets/img/logo.png" alt="logo image">
        Sushi
      </a>

      <div class="nav-menu" id="nav-menu">
        <ul class="nav-list">
          <li class="nav-item">
            <a class="nav-link active-link" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#popular">Popular</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#recently">Recently</a>
          </li>
        </ul>
        <div class="nav-close" id="nav-close">
          <i class="ri-close-line"></i>
        </div>
        <img class="nav-img1" src="./assets/img/leaf-branch-4.png" alt="nav image">
        <img class="nav-img2" src="./assets/img/leaf-branch-3.png" alt="nav image">
      </div>
      <div class="nav-buttons">
        <i class="ri-moon-line change-theme" id="theme-button"></i>
        <div class="nav-toggle" id="nav-toggle">
          <i class="ri-apps-2-line"></i>
        </div>
      </div>
    </nav>
  </header>

  <!-- 主体区 -->
  <main class="main">
    <!-- home -->
    <section class="home section" id="home">
      <div class="home-container container grid">
        <img class="home-img" src="./assets/img/home-sushi-rolls.png" alt="home image">
        <div class="home-data">
          <h1 class="home-title">
            Enjoy Delicious
            <div>
              <img src="./assets/img/home-sushi-title.png" alt="home image" />
              Sushi Food
            </div>
          </h1>
          <p class="home-description">
            Enjoy a good dinner with the best dishes in the restaurant and
            improve your day.
          </p>
          <a href="#" class="button">
            Order Now <i class="ri-arrow-right-line"></i>
          </a>
        </div>
      </div>
      <img src="./assets/img/leaf-branch-2.png" alt="home image" class="home-leaf1" />
      <img src="./assets/img/leaf-branch-4.png" alt="home image" class="home-leaf2" />
    </section>

    <!-- about -->
    <section class="about section" id="about">
      <div class="about-container container grid">
        <div class="about-data">
          <span class="section-subtitle">About Us</span>
          <h2 class="section-title about-title">
            <div>
              We Provide
              <img src="./assets/img/about-sushi-title.png" alt="about image" />
            </div>
            Healthy Food
          </h2>
          <p class="about-description">
            Food comes to us from our relatives, whether they have wings or
            roots. This is how we consider food, it also has a culture. It has
            a history that passes from generation to generation.
          </p>
        </div>
        <img class="about-img" src="./assets/img/about-sushi.png" alt="about image">
      </div>
      <img class="about-leaf" src="./assets/img/leaf-branch-1.png" alt="about image">
    </section>

    <!-- popular -->
    <section class="popular section" id="popular">
      <span class="section-subtitle">The Best Food</span>
      <h2 class="section-title">Popular Dishes</h2>
      <div class="popular-container container grid">
        <article class="popular-card">
          <img class="popular-img" src="./assets/img/popular-onigiri.png" alt="popular image">
          <h3 class="popular-name">Onigiri</h3>
          <span class="popular-description">Japanese Dish</span>
          <span class="popular-price">$10.99</span>
          <button class="popular-button">
            <i class="ri-shopping-bag-line"></i>
          </button>
        </article>
        <article class="popular-card">
          <img class="popular-img" src="./assets/img/popular-onigiri.png" alt="popular image">
          <h3 class="popular-name">Spring Rolls</h3>
          <span class="popular-description">Japanese Dish</span>
          <span class="popular-price">$15.99</span>
          <button class="popular-button">
            <i class="ri-shopping-bag-line"></i>
          </button>
        </article>
        <article class="popular-card">
          <img class="popular-img" src="./assets/img/popular-onigiri.png" alt="popular image">
          <h3 class="popular-name">Sushi Rolls</h3>
          <span class="popular-description">Japanese Dish</span>
          <span class="popular-price">$19.99</span>
          <button class="popular-button">
            <i class="ri-shopping-bag-line"></i>
          </button>
        </article>
      </div>
    </section>

    <!-- recently -->
    <section class="recently section" id="recently">
      <div class="recently-container container grid">
        <div class="recently-data">
          <span class="section-subtitle">Recently Added1</span>
          <h2 class="sectiion-title">
            Sushi Samurai <br />
            Salmón Cheese
          </h2>
          <p class="recently-description">
            Take a look at what's new. And do not deprive yourself of a good
            meal, enjoy and be happy.
          </p>
          <a href="#" class="button">
            Order Now <i class="ri-arrow-right-line"></i>
          </a>
          <img src="./assets/img/spinach-leaf.png" alt="recently image" class="recently-data-img">
        </div>
        <img class="recently-img" src="./assets/img/recently-salmon-sushi.png" alt="recently image">
      </div>
      <img class="recently-leaf1" src="./assets/img/leaf-branch-2.png" alt="recently image">
      <img class="recently-leaf2" src="assets/img/leaf-branch-3.png" alt="recently image">
    </section>

    <!-- newsletter -->
    <section class="newsletter section">
      <div class="newsletter-container container">
        <div class="newsletter-content grid">
          <img class="newsletter-img" src="./assets/img/newsletter-sushi.png" alt="newsletter image">
          <div class="newsletter-data">
            <span class="section-subtitle">Newsletter</span>
            <h2 class="section-title">
              Subscribe For <br />
              Offer Updates
            </h2>
            <form action="" class="newsletter-form">
              <input class="newsletter-input" type="email" placeholder="Enter email">
              <button class="button newsletter-button">
                Subscribe<i class="ri-send-plane-line"></i>
              </button>
            </form>
          </div>
        </div>
        <img class="newsletter-spinach" src="./assets/img/spinach-leaf.png" alt="newsletter image">
      </div>
    </section>
  </main>

  <!-- 底部区 -->
  <footer class="footer">
    <div class="footer-container container grid">
      <div>
        <a class="footer-logo" href="#">
          <img src="./assets/img/logo.png" alt="logo image" />
          Sushi
        </a>
        <p class="footer-description">
          Food for the body is not <br />
          enough. There must be food <br />
          for the soul.
        </p>
      </div>
      <div class="footer-content">
        <div>
          <h3 class="footer-title">Main Menu</h3>
          <ul class="footer-links">
            <il><a href="#" class="footer-link">About</a></il>
            <il><a href="#" class="footer-link">Menus</a></il>
            <il><a href="#" class="footer-link">Offer</a></il>
            <il><a href="#" class="footer-link">Events</a></il>
          </ul>
        </div>

        <div>
          <h3 class="footer-title">Information</h3>
          <ul class="footer-links">
            <il><a href="#" class="footer-link">Contact</a></il>
            <il><a href="#" class="footer-link">Order & Returns</a></il>
            <il><a href="#" class="footer-link">Videos</a></il>
            <il><a href="#" class="footer-link">Reservation</a></il>
          </ul>
        </div>

        <div>
          <h3 class="footer-title">Address</h3>
          <ul class="footer-links">
            <il class="footer-information">Av. Hacienda 1234 <br />
              Lima 4321, Perú
            </il>
            <il class="footer-information">9AM - 11PM</il>
          </ul>
        </div>

        <div>
          <h3 class="footer-title">
            <ul class="footer-social">
              <a class="footer-social-link" href="https://www.facebook.com/">
                <i class="ri-facebook-circle-fill"></i>
              </a>
              <a class="footer-social-link" href="https://www.instagram.com/">
                <i class="ri-instagram-fill"></i>
              </a>
              <a class="footer-social-link" href="https://twitter.com/">
                <i class="ri-twitter-fill"></i>
              </a>
            </ul>
          </h3>
        </div>
      </div>
      <img class="footer-onion" src="./assets/img/spring-onion.png">
      <img class="footer-spinach" src="./assets/img/spinach-leaf.png">
      <img class="footer-leaf" src="./assets/img/leaf-branch-4.png">
    </div>
    <div class="footer-info container">
      <div class="footer-card">
        <img src="./assets/img/footer-card-1.png" alt="footer image" />
        <img src="./assets/img/footer-card-2.png" alt="footer image" />
        <img src="./assets/img/footer-card-3.png" alt="footer image" />
        <img src="./assets/img/footer-card-4.png" alt="footer image" />
      </div>
      <span class="footer-copy">&#169; Copyright Jetwang. All rights reserved</span>
    </div>
  </footer>

  <!-- 返回顶部 -->
  <a href="#" class="scroll-up" id="scroll-up">
    <i class="ri-arrow-up-line"></i>
  </a>

  <!-- 滚动效果js库 -->
  <script src="./assets/js/scrollreveal.min.js"></script>
  <!-- main js -->
  <script src="./assets/js/main.js"></script>
</body>

</html>